<template>
  <view class="main-container padding-sm">
    <!-- 操作栏 -->
    <view class="app-header">
      <view class="cu-bar bg-white">
        <view class="action border-title">
          <text class="text-xl text-bold text-blue">{{ visitTitle }}</text>
          <text class="bg-gradual-blue" style="width:3rem"></text>
        </view>
      </view>
    </view>
    <view class="step-container cu-timeline">
      <!-- 列表元素 -->
      <view class="cu-item" v-for="(item, index) in detailData" :key="index">
        <view class="content">
          <!-- 时间 -->
          <view class="cu-capsule radius">
            <view
              :class="{'cu-tag bg-red': item.status === 0, 'cu-tag bg-yellow': item.status === 1, 'cu-tag bg-cyan': item.status === 2}">
              {{ item.status === 2 ? '回复时间' : '发布时间' }}
            </view>
            <view
              :class="{'cu-tag line-red':item.status === 0,'cu-tag line-yellow':item.status === 1,'cu-tag line-cyan':item.status === 2}">
              {{ item.status === 2 ? item.replyTime : item.createTime }}
            </view>
          </view>
          <!-- 内容 -->
          <view class="margin-top">
            <view class="content-container">
              <text class="text-title">随访标题：</text>
              <text class="text-content">{{ item.stepTitle }}</text>
            </view>
            <view class="content-container">
              <text class="text-title">随访内容：</text>
              <view class="text-content padding-xs" @click="showDrawer('showLeft', index)" v-if="item.status === 2">
                <view class='cu-tag light bg-blue'>点击查看
                  <view class="text-sm">
                    <text class="lg text-sm cuIcon-attention"></text>
                  </view>
                </view>
              </view>
              <view class="text-content padding-xs" v-else>
                等待完善
              </view>
            </view>
            <view class="content-container">
              <text class="text-title">随访阶段：</text>
              <text class="text-content">第 {{ item.visitStep }} 阶段</text>
            </view>
            <view class="content-container">
              <text class="text-title">发起时间：</text>
              <text class="text-content">{{ item.createTime }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="uni-drawer">
      <uni-drawer ref="showLeft" mode="left" :width="280" @change="change($event,'showLeft')">
        <view class="drawer-container padding-sm">
          <uni-title type="h2" :title="visitTitle"></uni-title>
          <view class="module-list" :key="index1" v-for="(item1, index1) in moduleList">
            <uni-title class="h5" type="h3" color="#666" :title="'- ' + item1.moduleName"></uni-title>
            <view class="module-container" :key="index2" v-for="(item2, index2) in item1.params.fieldList">
              <view class="drawer-title">
                {{ item2.fieldName }}：
              </view>
              <view class="drawer-content" v-if="item2.fieldType === 0">
                {{ item2.fieldValue }}
              </view>
              <view class="drawer-content" v-else>
                {{ item2.fieldValue }} [ 分 ]
              </view>
            </view>
          </view>
        </view>
      </uni-drawer>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad(option) {
      this.visitTitle = option.title;
      this.fetchData(option.id);
    },

    methods: {
      // 关闭窗口
      closeDrawer(e) {
        this.$refs[e].close();
      },
      // 打开窗口
      showDrawer(e, index) {
        this.$refs[e].open();
        this.moduleList = this.detailData[index].moduleListVo;
      },
      // 抽屉状态发生变化触发
      change(e, type) {
        this[type] = e;
      },
      async fetchData(id) {
        // 获取随访步骤详情
        const {
          data: res
        } = await uni.$http.get(`/visit/stepDetail/${id}`)
        // 判断是否获取失败
        if (res.code !== 200) return uni.$showMsg()
        this.detailData = res.data;
        console.log(this.detailData)
      },
    },

    data() {
      return {
        showLeft: false,
        // 折叠内容
        visitTitle: "",
        detailData: {},
        // 模块集合
        moduleList: [],
      };
    }
  }
</script>

<style lang="scss">
  .step-container {
    margin-top: 20px;
    border-radius: 8px;
  }

  .drawer-container {
    .module-container {
      display: flex;
      align-items: center;
      overflow-x: auto;

      /* 垂直居中对齐标题和内容 */
      .drawer-title {
        font-size: 13px;
        color: #333;
        flex-shrink: 0;
        margin-left: 2em;
        /* 缩进两个空格的宽度 */
      }

      .drawer-content {
        font-size: 13px;
        white-space: nowrap;
        /* 不换行 */
        padding-right: 10px;
      }
    }

  }


  .app-header {
    height: 60px;
    padding: 5px;
    background-color: white;
    border-radius: 5px;
  }

  .content {

    .content-container {
      display: flex;
      align-items: center;

      .text-title {
        color: #333;
        margin-right: 5px;
      }

      .text-content {
        color: #666;
      }
    }

  }
</style>